<template>
    <div class="root">
        <header>
            <button>条件筛选</button>
            <div>
                <button>历史视频</button>
                <button>实时视频</button>
                <span>用户： 管理员</span>
            </div>
        </header>

        <main>
            <div v-for="item in users" :key="item.id" class="item">
                <div class="item-info">
                    <img :src="item.avatar" alt="加载失败" />
                    <div class="basic-info">
                        <p class="name">{{ item.name }}</p>
                        <p class="gender">{{ item.gender }}</p>
                        <p class="isMatched">
                            匹配{{ item.isMatched ? "成功" : "失败" }}
                        </p>
                        <p class="reason">来访事由</p>
                    </div>
                </div>
                <p class="tel">{{ item.tel }}</p>
                <p class="time">{{ item.time }}</p>
            </div>
        </main>
    </div>
</template>

<script>
    export default {
        setup() {
            const users = Array.from({ length: 9 }).map((item, id) => ({
                id,
                avatar:
                    "https://img2.woyaogexing.com/2020/10/22/da110aace2b541158b7f114b81f669ae!400x400.webp",
                name: "王晓二",
                gender: "女",
                isMatched: true,
                reason: "",
                tel: "18012341234",
                time: "2020-09-08 10:23:34",
            }));
            return { users };
        },
    };
</script>

<style scoped lang="scss">
    header {
        display: flex;
        margin: 0 15px;
        justify-content: space-between;
        font-size: 12px;
        button {
            margin-right: 15px;
            border-radius: 8px;
            line-height: 2;
        }
        span {
            color: #fff;
        }
    }

    main {
        display: flex;
        flex-wrap: wrap;
        padding: 15px;

        .item {
            width: calc((100% - 20px) / 2);
            box-shadow: 0 0 9px #999;
            margin: 5px;
            padding: 5px;
            background-color: #fff;
            border-radius: 8px;

            .item-info {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                img {
                    width: 20vw;
                    height: 30vw;
                    object-fit: cover;
                    border-radius: 8px;
                }
                .basic-info {
                    margin-left: 5px;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    p {
                        margin: 5px;
                    }
                }
            }
        }
    }
</style>